<template>
    <el-row class="newPage">
        <!-- 查询条件区 -->
        <el-col :span="24">
            <el-form ref="queryForm" :model="queryFromData" label-width="100px" class="form-container">
                <el-row :gutter="15">
                    <el-col :span="6">
                        <el-form-item label="条件1" prop="selectOption">
                            <el-input v-model="queryFromData.selectOption" placeholder="请输入查询条件" clearable style="width: 100%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="时间" prop="selectDate">
                            <el-date-picker
                                v-model="queryFromData.selectDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                style="width: 100%;"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
        
        <!-- 按钮区 -->
        <el-col :span="24">
            <el-button type="success" style="margin-left:5px;"
                icon="el-icon-search"
                @click="handleQueryClick">查询
            </el-button>
            <el-button type="warning" icon="el-icon-refresh-left" style="margin-left:5px;"
                @click="handleResetClick">重置
            </el-button>
            <el-button type="primary" icon="el-icon-refresh-left" style="margin-left:5px;"
                @click="handlePostingBySelf">手动过账
            </el-button>
        </el-col>

        <!-- 表格区 -->
        <el-col :span="24">
            <el-table
                :data="dataList"
                style="width: 100%; margin-bottom: 20px"
                row-key="pid"
                >
                <el-table-column type="expand">
                    <template #default="props">
                        <div m="4">
                            <el-table :data="props.row.detail">
                                <el-table-column prop="pid" label="ID" />
                                <el-table-column prop="bill_no" label="领料单号(推送erp后回写)" />
                                <el-table-column prop="material_code" label="物料编码" />
                                <el-table-column prop="owner_type" label="货主类型" />
                                <el-table-column prop="owner" label="货主" />
                                <el-table-column prop="keeper_type" label="保管者类型" />
                                <el-table-column prop="keeper" label="保管者" />
                                <el-table-column prop="storage_area" label="仓库" />
                                <el-table-column prop="mondify_user" label="修改人" />
                                <el-table-column prop="mondify_date" label="修改日期" />
                                <el-table-column prop="remarks" label="备注" />
                                <el-table-column prop="send_qty" label="实发数量" />
                                <el-table-column prop="main_id" label="领料单ID" />
                                <el-table-column prop="quantity" label="数量" />
                                <el-table-column prop="cost_center_code" label="车间" />
                                <el-table-column prop="component_no" label="生产用量清单编号" />
                                <el-table-column prop="component_erp_header_id" label="生产用料清单ID" />
                                <el-table-column prop="component_erp_item_id" label="生产用料清单行ID" />
                                <el-table-column prop="component_erp_item_no" label="生产用料清单行号" />
                                <el-table-column prop="erp_id" label="生产订单ID" />
                                <el-table-column prop="shop_order_no" label="生产订单编号" />
                                <el-table-column prop="erp_item_id" label="生产订单行ID" />
                                <el-table-column prop="order_item_no" label="生产订单行号" />
                                <el-table-column prop="pro_batch_no" label="批次号" />
                                <el-table-column prop="unit" label="单位" />
                                <el-table-column prop="produce_date" label="生产日期" />
                                <el-table-column prop="valid_date" label="有效期" />
                            </el-table>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="pid" label="ID" sortable />
                <el-table-column prop="bill_no" label="领料单号(推送erp后回写)" sortable />
                <el-table-column prop="bill_type" label="单据类型" sortable />
                <el-table-column prop="bill_date" label="单据日期" sortable />
                <el-table-column prop="send_organize" label="发料组织(200)" sortable />
                <el-table-column prop="product_organize" label="生产组织(200)" sortable />
                <el-table-column prop="mondify_user" label="修改人" sortable />
                <el-table-column prop="mondify_date" label="修改日期" sortable />
                <el-table-column prop="shop_order" label="工单号" sortable />
                <el-table-column prop="system_status" label="系统状态" sortable />
                <el-table-column prop="order_no" label="领料单号" sortable />
                <el-table-column prop="create_date" label="创建时间" sortable />
                <el-table-column prop="create_user" label="创建人" sortable />
            </el-table>
        </el-col>

    </el-row>
</template>

<script setup>
import { ref } from 'vue';
import head from '../components/maolue/newPage/headMock';
import detail from '../components/maolue/newPage/detailMock';
// 查询条件
const queryFromData = ref({
    selectOption:'',
    selectDate:[]
})

// 状态
const dataList = ref([])

// 方法
// 查询
const handleQueryClick = ()=>{
    dataList.value = head
    dataList.value.forEach(val=>{
        val.detail = detail
    })
}
// 重置
const handleResetClick = ()=>{
    
}
//手动过账
const handlePostingBySelf = ()=>{

}
// 拼接数据
const concatData = (head,detail)=>{
    head.forEach(val=>{
        let pid = val.pid
        let arr = []
        detail.forEach(det=>{
            if(dit.main_id == pid){
                arr.push(dit)
            }
        })
        val.detail = arr
    })
    return head
}

// 获取数据
handleQueryClick()
</script>

<style scoped>
.newPage{
    width: 100%;
}
</style>